﻿$(function () {

    var isRotating = false;
    var silverGoods;
    var goldGoods;
    var diamondGoods;
    var silverColorList = ['#fb313c', '#f93855'];
    var goldColorList = ['#f8893a', '#ffe51e'];
    var diamondColorList = ['#46aef5', '#5df1e7'];
    var silver_total_rotate_deg = 0;
    var gold_total_rotate_deg = 0;
    var diamond_total_rotate_deg = 0;

    $(".xuan_rules a").click(function () {
        $("#zj-rules").show();
    });
    $(".close_zj").click(function () {
        $("#zj-main").hide();
    });
    $(".close_zj_rules").click(function () {
        $("#zj-rules").hide();
    });
    $('#zj-image').click(function () {
        $('#zj-image-main').hide();
    });
    $('.prize_ul').liMarquee({
        direction: 'up',
        scrollamount: 5
    });

    $('#silverPointer').click(function () {
        $(".home_page").find(".zj-big-main").css("height",document.body.clientHeight);
        $(".home_page").find(".zj-main").css("height",document.body.clientHeight);
        $('html,body').animate({scrollTop: $('#silverDiv').offset().top}, 10)
        rotating('silver', silverGoods);
    });

    $('#goldPointer').click(function () {
        $(".home_page").find(".zj-big-main").css("height",document.body.clientHeight);
        $(".home_page").find(".zj-main").css("height",document.body.clientHeight);
        rotating('gold', goldGoods);
    });

    $('#diamondPointer').click(function () {
        $(".home_page").find(".zj-big-main").css("height",document.body.clientHeight);
        $(".home_page").find(".zj-main").css("height",document.body.clientHeight);
        rotating('diamond', diamondGoods);
    });

    function init() {
        $("li").css({});

        var H = $(window).height(),
            W = $(window).width();
        $(".cover").css({"width": W, "height": H});

        silverGoods = [{
            label: '奖品1',
            img: 'images/goods/55寸彩电.png'
        }, {
            label: '奖品2',
            img: 'images/goods/四开门冰箱.png'
        }, {
            label: '奖品3',
            img: 'images/goods/茅台.png'
        }, {
            label: '奖品4',
            img: ''
        }, {
            label: '奖品5',
            img: ''
        }, {
            label: '奖品6',
            img: ''
        }, {
            label: '奖品7',
            img: ''
        }, {
            label: '奖品8',
            img: ''
        }
        ];
        goldGoods = [{
            label: '奖品1',
            img: 'images/goods/55寸彩电.png'
        }, {
            label: '奖品2',
            img: 'images/goods/四开门冰箱.png'
        }, {
            label: '奖品3',
            img: 'images/goods/茅台.png'
        }, {
            label: '奖品4',
            img: ''
        }, {
            label: '奖品5',
            img: ''
        }, {
            label: '奖品6',
            img: ''
        }, {
            label: '奖品7',
            img: ''
        }, {
            label: '奖品8',
            img: ''
        }, {
            label: '奖品9',
            img: ''
        }, {
            label: '奖品10',
            img: ''
        }
        ];
        diamondGoods = [{
            label: '奖品1',
            img: 'images/goods/55寸彩电.png'
        }, {
            label: '奖品2',
            img: 'images/goods/四开门冰箱.png'
        }, {
            label: '奖品3',
            img: 'images/goods/茅台.png'
        }, {
            label: '奖品4',
            img: ''
        }, {
            label: '奖品5',
            img: ''
        }, {
            label: '奖品6',
            img: ''
        }, {
            label: '奖品7',
            img: ''
        }, {
            label: '奖品8',
            img: ''
        }, {
            label: '奖品9',
            img: ''
        }, {
            label: '奖品10',
            img: ''
        }, {
            label: '奖品11',
            img: ''
        }, {
            label: '奖品12',
            img: ''
        }
        ];

        draw('silver', silverGoods, silverColorList);
        draw('gold', goldGoods, goldColorList);
        draw('diamond', diamondGoods, diamondColorList);
    }

    function draw(id, goods, colorList) {
        var total_rotate_deg = 0;
        var num = goods.length;

        $('#' + id + 'CountDown').css('transition', 'all ' + 1 + 's');
        $('#' + id + 'CountDown').css('transform', 'rotate( ' + total_rotate_deg + 'deg)');

        $('#' + id + 'Svg').empty();
        total_rotate_deg += 360 / num / 2;
        var path_doms = '';
        // 渲染dom
        for (var index = 0; index < num; index++) {
            var line_dom = '<div class="line"></div>';
            var path_dom = '<path id="' + id + 'Path' + (index + 1) + '" class="path" style="fill:' + colorList[index % 2] + '"></path>';
            var section_dom = '<div class="section">\n' +
                '        <span class="s_text">' + goods[index].label + '</span>\n' +
                '        <img src="' + goods[index].img + '"  alt="" />\n' +
                '    </div>';
            $('#' + id + 'CountDown').append(line_dom);
            $('#' + id + 'CountDown').append(section_dom);
            path_doms += path_dom;
        }
        document.getElementById('' + id + 'Svg').innerHTML = path_doms;
        var radius = document.body.clientWidth - 50;
        // 定义pointer的位置
        $('#' + id + 'Pointer').css('top', (radius / 2 - 50) + 'px');
        $('#' + id + 'Pointer').css('left', (radius / 2 - 40) + 'px'); // 8是边框
        $('#' + id + 'CountDown').css('width', radius + 'px');
        $('#' + id + 'CountDown').css('height', radius + 'px');
        var section_width = Math.sin(2 * Math.PI / 360 * 180 / num) * (radius / 2) * 2;
        var section_height = Math.cos(2 * Math.PI / 360 * 180 / num) * (radius / 2);  
        $('#' + id + 'CountDown .section').css('width', section_width);
        $('#' + id + 'CountDown .section').css('height', radius / 2);
        var left = radius / 2 - section_width / 2;
        var top_value = radius / 2 - section_height;
        var line_left = radius / 2 - 1; 
        $('#' + id + 'CountDown .section').css('left', left + 'px');
        // $('.section').css('top', top_value + 'px');
        $('#' + id + 'CountDown .s_text').css('margin-top', section_height * 0.001 + 'vw');
        // 确定分割线高度 位置
        $('#' + id + 'CountDown .line').css('height', radius / 2);
        $('#' + id + 'CountDown .line').css('left', line_left + 'px');
        for (var index = 0; index < num; index++) {
            $('#' + id + 'CountDown .line').eq(index).css('transform', 'rotate(' + (360 / num * index - 180 / num) + 'deg)');
            $('#' + id + 'CountDown .line').eq(index).css('transform-origin', '50% 100%');
            $('#' + id + 'CountDown .section').eq(index).css('transform', 'rotate(' + 360 / num * index + 'deg)');
            $('#' + id + 'CountDown .section').eq(index).css('transform-origin', section_width / 2 + 'px ' + radius / 2 + 'px');
            // path
            $('#' + id + 'Path' + (index + 1)).css('transform-origin', (radius / 2) + 'px ' + (radius / 2) + 'px');
            $('#' + id + 'Path' + (index + 1)).attr('d', 'M' + left + ',' + top_value + ' A' + radius / 2 + ' ' + radius / 2 + ' 0 0 1 ' + (left + section_width) + ' ' + top_value + ' L' + radius / 2 + ' ' + radius / 2 + '');
            $('#' + id + 'Path' + (index + 1)).css('transform', 'rotate(' + 360 / num * index + 'deg)');
        }
    }

    function rotating(id, goods) {
        var total_rotate_deg = 0;
        if (id == 'silver') {
            total_rotate_deg = silver_total_rotate_deg;
        } else if (id == 'gold') {
            total_rotate_deg = gold_total_rotate_deg;
        } else if (id == 'diamond') {
            total_rotate_deg = diamond_total_rotate_deg;
        }


        if (!isRotating) {
            isRotating = true;
            var num = goods.length;

            var random_deg = 360*5 + (Math.floor)(Math.random() * (num) + 1) * ( 360 / num );
            //var random_deg = Math.floor(Math.random() * (3240 - 1080 + 1) + 1080);
            total_rotate_deg += random_deg;
            var random_time = total_rotate_deg / 360 * 0.5; // 0.5表示一圈0.5s
            $('#' + id + 'CountDown').css('transition', 'all ' + random_time + 's');
            $('#' + id + 'CountDown').css('transform', 'rotate( ' + total_rotate_deg + 'deg)');

            if (id == 'silver') {
                silver_total_rotate_deg = total_rotate_deg;
            } else if (id == 'gold') {
                gold_total_rotate_deg = total_rotate_deg;
            } else if (id == 'diamond') {
                diamond_total_rotate_deg = total_rotate_deg;
            }

            setTimeout(function () {
                isRotating = false;
                if (id == 'silver') {
                    $('#zj-big-main').show();
                    goldNum = 0;
                    setTimeout(add, 100);
                    $('html,body').animate({scrollTop: $('#goldDiv').offset().top}, 10000)
                } else if (id == 'gold') {
                    $('#zj-big-main').show();
                    goldNum = 0;
                    setTimeout(add, 100);
                    $('html,body').animate({scrollTop: $('#diamondDiv').offset().top}, 10000)
                } else if (id == 'diamond') {
                    goldNum = 0;
                    setTimeout(add, 100);
                    $('#zj-image-main').show();
                }
            }, random_time * 1000)

        }
    }

    /* 飘落金币和红包逻辑 */
    var win = (parseInt($(".couten").css("width"))) - 80;
    var goldNum = 0;
    var add = function () {
        if (goldNum > 150) {
            setTimeout($('#zj-big-main').hide(), 1000);
            return;
        }

        var hb = parseInt(Math.random() * (5 - 1) + 1);
        var Wh = parseInt(Math.random() * (70 - 30) + 20) ;
        var Left = parseInt(Math.random() * (win - 0) + 0);
        var rot = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg";
        goldNum++;


        $(".couten").append("<li class='li" + goldNum + "' style='z-index: 9999'><a href='javascript:;'><img src='images/hb_" + hb + ".png'></a></li>");

        $(".li" + goldNum).css({
            "left": Left,
        });
        $(".li" + goldNum + " a img").css({
            "width": Wh,
            "transform": "rotate(" + rot + ")",
            "-webkit-transform": "rotate(" + rot + ")",
            "-ms-transform": "rotate(" + rot + ")", /* Internet Explorer */
            "-moz-transform": "rotate(" + rot + ")", /* Firefox */
            "-webkit-transform": "rotate(" + rot + ")",/* Safari 和 Chrome */
            "-o-transform": "rotate(" + rot + ")" /* Opera */
        });
        $(".li" + goldNum).animate({'top': $(window).height() * 3 + 120}, 2000, function () {
            //删掉已经显示的红包
            this.remove()
        });

        setTimeout(add, 50)
    }

    init();
});